<template>
<div class="mar5 pad5 bcf round3">
  <title-a>选择房产</title-a>
  <div>
    <mu-row>
      <mu-col :span="3"><EzSearch :config="houseSearchConfig" v-model="houseId"></EzSearch></mu-col>
      <mu-col :span="9"><mu-button color="primary" @click="getData">获取缴费数据</mu-button></mu-col>
    </mu-row>
  </div>
  <div class="flex-r flex-start lh2" :key="updateKey">
    <div class="flex1">
      <title-a>未缴费</title-a>
      <div class="flrc bc13 mart10" >
        <div class="flex3">费用标题</div>
        <div class="flex1">金额</div>
        <div class="flex1">开始</div>
        <div class="flex1">截止</div>
        <div class="flex1 tar">选择</div>
      </div>
      <div class="flrc bdbda" v-for="(item,index) in unpayList" :key="index" v-show="!item.selected">
        <div class="flex3 padtb3">{{item.name}}</div>
        <div class="flex1">{{item.amount}}</div>
        <div class="flex1">{{$utils.str2date(item.startAt)}}</div>
        <div class="flex1">{{$utils.str2date(item.endAt)}}</div>
        <div class="flex1 tar">
          <mu-button @click="selectRow(index)" small icon><mu-icon value="arrow_right"></mu-icon></mu-button>
        </div>
      </div>
      <title-a class="mart10">缴费记录</title-a>
      <div class="flrc bc13 mart10" >
        <div class="flex3">费用标题</div>
        <div class="flex1">金额</div>
        <div class="flex1">开始</div>
        <div class="flex1">截止</div>
        <div class="flex1">缴费时间</div>
      </div>
      <div class="flrc bdbda" v-for="item,index in payList" :key="index">
        <div class="flex3 padtb3">{{item.name}}</div>
        <div class="flex1">{{item.amount}}</div>
        <div class="flex1">{{$utils.str2date(item.startAt)}}</div>
        <div class="flex1">{{$utils.str2date(item.endAt)}}</div>
        <div class="flex1">{{$utils.str2date(item.payAt)}}</div>
      </div>
    </div>
    <div class="flex1 marl5" >
      <title-a>缴费项目</title-a>
      <div class="flrc bc13 mart10" >
        <div class="flex3">费用标题</div>
        <div class="flex1">金额</div>
        <div class="flex1">开始</div>
        <div class="flex1">截止</div>
        <div class="flex1 tar">选择</div>
      </div>
      <div class="flrc bdbda" v-for="(item,index) in unpayList" :key="index" v-show="!!item.selected">
        <div class="flex3 padtb3">{{item.name}}</div>
        <div class="flex1">{{item.amount}}</div>
        <div class="flex1">{{$utils.str2date(item.startAt)}}</div>
        <div class="flex1">{{$utils.str2date(item.endAt)}}</div>
        <div class="flex1 tar">
          <mu-button @click="selectRow(index)" small icon><mu-icon value="close"></mu-icon></mu-button>
        </div>
      </div>
      <div class="bc13 flrc">
        <div class="">合计：</div>
        <div class="flex1 tar fs14 fwb">{{sumAll()}}</div>
      </div>
      <div class="mart5">
        <title-a>缴费信息</title-a>
        <EzData :config="fb" v-model="payModel"></EzData>
        <div>
          <mu-button @click="confirmPayment" color="primary">确认付款</mu-button>
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
import TitleA from "@/comps/comm/TitleA.vue";
import EzSearchConfig from "@/comps/form/EzSearchConfig";
import apiHouse from "@/pages/v1/pm/House/js/apiHouse";
import EzSearch from "@/comps/form/EzSearch.vue";
import apiFeeHouse from "@/pages/v1/pm/FeeHouse/js/apiFeeHouse";
import formBuilder from "@/comps/form/formBuilder";
import apiPayType from "@/pages/v1/pm/PayType/js/apiPayType";
import EzData from "@/comps/EzData.vue";

export default {
  components: {EzData, EzSearch, TitleA},
  data(){
    let houseSearchConfig = EzSearchConfig()
    houseSearchConfig.setApi(apiHouse.urlChoice).setApiSearchKeys(["name__regex"])

    let fb = formBuilder()
    fb.setLabelWidth(100)
    fb.addSelect("payTypeId","付款方式",3)
        .setApi(apiPayType.urlChoice)
    fb.addText("cut","优惠金额",3).setTextTypeNumber()
    fb.addText("note","备注",12)
        .setTextMulti(true).setTextRows(3)
    return{
      houseSearchConfig,
      fb,
      houseId:0,
      payList:[],
      unpayList:[],
      updateKey:"",
      payModel:{cut:0},
    }
  },
  mounted() {
  },
  methods:{
    confirmPayment(){
      //筛选出已选择的ID
      let selectedIds = []
      for (let row of this.unpayList) {
        if (row.selected){
          selectedIds.push(row.id)
        }
      }
      apiFeeHouse.pay({
        rows:selectedIds,
        payTypeId:this.payModel.payTypeId,
        cut:this.payModel.cut,
        note:this.payModel.note,

      },res=>{
        console.log(res)
        this.getData()
      })
    },
    sumAll(){
      let total = 0
      for (let row of this.unpayList) {
        if (row.selected){
          total += row.amount
        }
      }
      return total.toFixed(2)
    },
    selectRow(index){
      this.unpayList[index].selected = !this.unpayList[index].selected
      this.updateKey = Math.random()
    },
    getData(){
      if (this.houseId === 0){
        this.$toast.error("请选择房屋")
        return
      }

      this.getList(true)
      this.getList(false)
    },
    getList(isPay){
      apiFeeHouse.findBy({
        _where:{houseId:this.houseId,isPay},
        page:1,
        limit:0,
      },res=>{
        if (isPay){
          this.payList = res
        }else {
          this.unpayList = res
        }
      })
    }
  }

}
</script>

<style scoped>

</style>